<template>
  <div class="search-con">
    <a-input
      placeholder="输入问题..."
      v-model="search"
      @focus="onFocus"
      @blur="onBlur"
      @input="onInput"
      class="search"
    >
      <span slot="addonAfter" class="search-btn">Big Search</span>
    </a-input>
    <dl class="searchList" v-if="isFocus&&!this.search">
      <dd v-for="item of currentList" :key="item.id" @click="handleClick(item.id)">
        <nuxt-link :to="{path:'/search',query:{id:item.id}}" class="module">{{item.title}}</nuxt-link>
      </dd>
    </dl>
    <dl class="searchList" v-if="isFocus&&this.search">
      <dd v-for="item of searchList" :key="item.id" @click="handleClick(item.id)">
        <nuxt-link :to="{path:'/search',query:{id:item.id}}" class="module">{{item.title}}</nuxt-link>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
      isFocus: false,
      currentList: [
        {
          id: Math.random(0, 1),
          title: "这是focus的内容..."
        },
        {
          id: Math.random(0, 1),
          title: "这是focus的内容..."
        },
        {
          id: Math.random(0, 1),
          title: "这是focus的内容..."
        }
      ],
      searchList: [
        {
          id: Math.random(0, 1),
          title: "这是查询的内容..."
        },
        {
          id: Math.random(0, 1),
          title: "这是查询的内容..."
        },
        {
          id: Math.random(0, 1),
          title: "这是查询的内容..."
        }
      ]
    };
  },
  methods: {
    handleClick(id) {
      console.log(id);
    },
    onFocus: function() {
      this.isFocus = true;
    },
    onBlur: function() {
      let self = this;
      setTimeout(function() {
        self.isFocus = false;
      }, 200);
    },
    onInput: function() {
      // let self = this;
      // setTimeout(function() {
      //   self.isFocus = false;
      // }, 200);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~/assets/style/color.scss";
.search-con {
  width: 34rem;
  margin: 14rem auto 4rem;
  position: relative;
  text-align: left;
  .search {
    .search-btn {
      width: 10rem;
      cursor: pointer;
      &:hover {
        color:  $base; 
      }
    }
  }
  .searchList {
    z-index: 998;
    width: 28.5rem;
    padding: 0.4rem 0;
    margin-top: 5px;
    text-indent: 0.8rem;
    border: 1px solid $border;
    box-sizing: border-box;
    text-align: left;
    position: absolute;
    background-color: #fff;
    dd {
      line-height: 1.8rem;
      font-size: 0.8rem;
      cursor: pointer;
      &:hover {
        color: $base;
        background-color: $hoverBG;
      }
      a {
        color: #666;
        text-decoration: none;
      }
    }
  }
} 
</style>